<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
    <table border="1" bordercolor="red">
        <tr>
            <td><div id="show"></div></td>
        </tr>
    </table>
    <form id="upfm">
        <input type="hidden" id="imgData" name="imgData">
        <input type="file" id="file" name="file" onchange="showImg()">
        <input type="button" id="save" value="选择图片" onclick="toSave()">
    </form>
    
    
    <script type="text/javascript">
    
       function showImg(){
    	   var file=document.getElementById("file").files[0];
    	   
    	   var reader=new FileReader();
    	   reader.readAsDataURL(file);
    	   
    	   reader.onload=function(e){
    		   //获取图片的base64字符串
    		   var imgBase64Data=e.target.result;
    		   $("img").remove();
    		   $("#show").append("<img src='"+imgBase64Data+"'/>");
    		   
    		   //截取字符串
    		   var head=imgBase64Data.indexOf("4")+2;
    		   imgBase64Data=imgBase64Data.substring(head,imgBase64Data.length-head);
    		   //将字符串中的"+" 替换成"%2B" 防止"+" 传过去变为空格
    		   var reg=new RegExp("\\+","g");
    		   imgBase64Data=imgBase64Data.replace(reg,"%2B");
    		   //存参数到隐藏的表单字段中
    		   $("#imgData").attr("value",imgBase64Data);
    	   }
       }
    </script>
    
</body>
</html>